<!--
/**
* Author: gaohui
* Date: 2023-03-01 16:28
* Desc: WatchComp watch基础用法
*/
-->

<template>
  <title-line title="watch基础用法" />
  <div class="mt10">数值A: {{ num }}</div>
  <div class="mt10">
    <el-button @click.stop="handleAdd">添加数值A</el-button>
  </div>
</template>

<script name="WatchComp" lang="ts" setup>
import { ref, watch } from "vue";
import { showMessage } from "@/utils/msgUtil";

const num = ref(11);

const handleAdd = () => {
  num.value += 1;
};

watch(
  () => num.value,
  (currentVal, beforeVal) => {
    console.log(currentVal, beforeVal);
    showMessage("监听到数值A变化了");
  },
  {
    immediate: false, // 默认值
    deep: false, // 默认值
  }
);
</script>
<style lang="scss" scoped></style>
